<template>
	<view class='sxs-dropdown' :style='styleList'>
		
		<view class='container'>
			<view
				v-for='(item,index) in menuList' 
				:key='index'
				@click='handlerMenuClick(index,item.dropdownKey)'
			>
				<text :class='index==currentIndex?"active":""'>{{ item.title }}</text>
				<uni-icons :type="index==currentIndex?'top':'bottom'" :size="menuIcon" :color='index==currentIndex?"blue":"#000"'></uni-icons>
			</view>
		</view>

		<uni-transition 
			:duration="500"
			:mode-class="modeClass"
			:show="active"
			@click="close"
			:styles="transfromClass"
		>
			<slot></slot>
		</uni-transition>
		
	</view>
</template>

<script>
export default{
	name:'sxs-dropdown',
	props:{
		// 显示的菜单
		menuList:{
			type:Array,
			default:[]
		},
		// 菜单的高度
		styleList:{
			type:Object,
			default(){
				return {
					height:'100rpx'
				}
			}
		},
		// 菜单图标大小
		menuIcon:{
			type:String,
			default:'16'
		},
		// 下拉菜单动画时间
		duration:{
			type:String,
			default:'500'
		},
		// 下拉菜单动画显示方式['fade']淡入淡出
		modeClass:{
			type:Array,
			default(){
				return ['fade']
			}
		},
		//下拉菜单的样式(uni-transition)
		transfromClass:{
			type:Object,
			default(){
				return {
					'width':'100%',
					'position': 'absolute',
					'top': '100rpx',
					'left': 0,
					'right': 0,
					'z-index':'999',
					'background':'#fff'
				}
			}
		}
	},
	data () {
		return {
			active:false,// 下拉菜单状态
			currentIndex:999,
			currentKey:'',//点击菜单进行匹配
			childList:[]
		}
	},
	methods:{
		/* 点击菜单
		 * 参数1：菜单下标
		 * 参数2：菜单key值
		*/
		handlerMenuClick( index,dropdownKey){
			if( index == this.currentIndex){
				return this.close();
			}
			this.open( index , dropdownKey );
		},
		// 展开下拉菜单
		open( index , dropdownKey ){
			// 展开下拉菜单
			this.active = true;
			//下拉菜单下标和currentIndex相等
			this.currentIndex = index;
			this.currentKey = dropdownKey;
			//添加组件
			this.childList.forEach( item=>item.init() )
		},
		// 收起下拉菜单
		close(){
			
			// 收起下拉菜单
			this.active = false;
			// 下拉菜单下标和currentIndex不相等
			this.currentIndex = 999;
			this.currentKey = '';
			//当关闭下拉菜单清空数组
			this.childList = [];
		}
	}
}
</script>

<style lang="scss">
.sxs-dropdown{
	position: relative;
	width: 100%;
}
.container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:15rpx 30rpx;
}
.active{
	color:blue;
}
</style>